<template>
  <div>
    <head-top :title="'忘记密码'"></head-top>
    <div class="login-content">
      <div v-if="ifShowCode" class="login-div">
        <div class="subheading-heavy">请输入验证码</div>
        <div class="paragraph-p2-light">{{ '验证码已发送至：' + email }}</div>
        <van-password-input class="password-input"
                            :value="verificationCode"
                            :gutter="10"
                            :focused="showKeyboard"
                            @focus="showKeyboard = true"
        />
        <van-number-keyboard
            v-model="verificationCode"
            :show="showKeyboard"
            @blur="showKeyboard = false"
        />
        <div class="button-all div-align-justify-center"
             :class="verificationCode ? 'button-all-active' : '' "
             @click="verifyCode"
        >确定
        </div>
        <div class="paragraph-p3-light div-align-justify-center"
             @click="reSendVerifyCode"
        >
          {{ countDownSecond === 0 ? '重发验证码' : '重发验证码(' + countDownSecond + ')' }}
        </div>
      </div>
      <div v-if="ifShowForgetPwd" class="login-div">
        <div class="subheading-heavy">请重置密码</div>
        <div class="paragraph-p2-light">至少8位，字母+数字组合</div>
        <div class="login-div-item">
          <div class="login-div-item-img div-align-justify-center">
            <img class="icon-24" src="@/static/icon/lock.png" alt=""/>
          </div>
          <input v-model="resetPwd" class="login-div-item-input" :type="ifShowPwd ? 'text' : 'password'"
                 placeholder="请输入密码"/>
          <img v-if="!ifShowPwd" class="icon-20" src="@/static/icon/20px_eye_closed.png" @click="ifShowPwd = !ifShowPwd"
               alt=""/>
          <img v-if="ifShowPwd" class="icon-20" src="@/static/icon/20px_eye_open.png" @click="ifShowPwd = !ifShowPwd"
               alt=""/>
        </div>
        <div class="button-all div-align-justify-center"
             :class="resetPwd ? 'button-all-active' : '' "
             @click="confirmResetPwd"
        >重置密码
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {NumberKeyboard, PasswordInput, Toast} from 'vant'
import HeadTop from '@/components/HeadTop'
import {checkVerifyCode, forgotPassword, getEmailVerifyCode} from "@/request/api";

export default {
  components: {
    [PasswordInput.name]: PasswordInput,
    [NumberKeyboard.name]: NumberKeyboard,
    HeadTop,
  },
  name: "LoginViewForgetPwd",
  data() {
    return {
      ifShowPwd: false,
      ifShowCode: true,
      ifShowForgetPwd: false,
      showKeyboard: true,
      countDownSecond: 0,
      email: this.$route.query.email,
      verificationCode: '',
      resetPwd: '',
      timer: Object,
      tipText: '',
    };
  },
  mounted() {
    this.reSendVerifyCode()
  },
  methods: {
    sendVerifyCode() {
      getEmailVerifyCode().then(res => {
        const {State} = res
        if (!State) {
          Toast('发送失败！！！')
        }
      })
    },

    getSecond() {
      this.countDownSecond = this.countDownSecond - 1
      if (this.countDownSecond === 0) {
        clearInterval(this.timer);
      }
    },
    reSendVerifyCode() {
      if (this.countDownSecond === 0) {
        this.countDownSecond = 60
        this.timer = setInterval(this.getSecond, 1000);
        this.sendVerifyCode()
      }
    },
    verifyCode() {
      if (this.verificationCode && this.verificationCode.length === 6) {
        checkVerifyCode({code: this.verificationCode}).then(res => {
          const {State} = res
          if (State) {
            this.ifShowCode = false
            this.ifShowForgetPwd = true
          }
        })
      }
    },
    confirmResetPwd() {
      if (this.resetPwd) {
        forgotPassword({email: this.email, password: this.resetPwd}).then(res => {
          const {State} = res
          if (State) {
            this.ifShowLogin = true
            this.ifShowCode = false
            this.ifShowForgetPwd = false
          }
        })
      }

    },
  },
};
</script>
<style scoped>
.login-content {
  margin-top: -1px;
  height: 725px;
  background: #FCD538;
  padding: 32px 24px 0 24px;
}

.login-div {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px 16px 16px 16px;
}

.login-div-item {
  height: 44px;
  margin-top: 24px;
  background: #FAFAFA;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.login-div-item-img {
  height: 44px;
  width: 44px;
  background: #FFF5CC;
  border-radius: 8px 0 0 8px;
}

.login-div-item-input {
  height: 44px;
  width: 260px;
  border: none;
  background: #FAFAFA;
  border-radius: 0 8px 8px 0;
}

.login-div-item-input-tip {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.login-div-item-input-tip > span {
  width: 144px;
  height: 18px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-div-text-center {
  text-align: center;
}

.password-input {
  padding: 48px 0;
}

.button-all {
  height: 48px;
  margin: 24px 0;
  background: #F5F5F5;
  border-radius: 24px;
}

.button-all-active {
  background: #FCD538;
  box-shadow: 0 4px 24px rgba(251, 202, 4, 0.32);
}
</style>